<template>
	<view class="trends">
		<view v-if="list" class="list" id="listArea">
            <view class="item" v-for="(item, index) in list" :key="index">
              <view class="item_hd wap" :class="{'nonePd':!item.Content}" @click="nav_to(`/pages/user/user_visitor?id=${item.UserID}`)">
                <view class="left">
                  <view class="cover">
                    <image :src="item.HeadImgUrl" mode="aspectFill" />
                  </view>

                  <view class="item_name">
                    <view class="userName">
                      {{ $util.entitiesToUtf16(item.Name) }}
                      <image v-if="item.UserType != '普通用户'" mode="widthFix" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1716367597061433.png"></image>
                      <view class="f3 c3 usertime">{{ getTime(item.CreateTime) }}</view>
                      </view>
                    <view class="daybox">
                      <text class="Birthday">{{item.Birthday? getYearStr(item.Birthday) + "后": "00后"}}</text>
                      <!-- <text class="borderLine">|</text>
                      <text class="city" v-if="item.City">{{
                        item.City ? item.City : ""
                      }}</text> -->
                    </view>
                  </view>
                </view>
              </view>
              <view class="item_bd wap">
                <!-- <view class="f2 c2" v-if="item.PagePath!=''" @click="nav_to(`${item.PagePath}`)">
									<view class="">
										{{item.Content}}
									</view>
								</view> -->
                <view class="f2 c4 diyC" v-if="item.Content">{{
                  $util.entitiesToUtf16(item.Content).replace(/ /g, "&nbsp;")
                }}</view>

                <view class="mt20" @click.stop="''" v-if="item.IsVideo === 0">
                  <view class="one" @click.stop="lookimg(item.Images,0,item.UserID)" v-if="JSON.parse(item.Images).length == 1">
                    <image class="simg oneImg" :src="JSON.parse(item.Images)[0]" mode="widthFix"
                      @click.stop="lookimg(item.Images, 0,item.UserID)" />
                  </view>
                  <view class="two" @click.stop="lookimg(item.Images,0,item.UserID)" v-else-if="JSON.parse(item.Images).length == 2">
                    <view class="two-one" @click.stop="lookimg(item.Images, 0,item.UserID)">
                      <image class="simg" :src="JSON.parse(item.Images)[0]
                        " mode="aspectFill" />
                    </view>
                    <view class="two-two">
                      <image class="simg" :src="JSON.parse(item.Images)[1]" mode="aspectFill"
                        @click.stop="lookimg(item.Images, 1,item.UserID)" />
                    </view>
                  </view>
                  <view class="three" @click.stop="lookimg(item.Images,0,item.UserID)" v-else-if="JSON.parse(item.Images).length == 3">
                    <view class="three-one" @click.stop="lookimg(item.Images, 0,item.UserID)">
                      <image class="simg" :src="JSON.parse(item.Images)[0]" mode="aspectFill" />
                    </view>
                    <view class="three-two">
                      <image class="simg" :src="JSON.parse(item.Images)[1]" mode="aspectFill"
                        @click.stop="lookimg(item.Images, 1,item.UserID)" />
                      <image class="simg" :src="JSON.parse(item.Images)[2]" mode="aspectFill"
                        @click.stop="lookimg(item.Images, 2,item.UserID)" />
                    </view>
                  </view>
                  <view class="four" @click.stop="lookimg(item.Images,0,item.UserID)" v-else-if="JSON.parse(item.Images).length == 4">
                    <view class="four-one">
                      <view class="four-one-one" @click.stop="lookimg(item.Images, 0,item.UserID)">
                        <image class="simg" :src="JSON.parse(item.Images)[0]" mode="aspectFill" />
                      </view>
                      <view class="four-one-two" @click.stop="lookimg(item.Images, 1,item.UserID)">
                        <image class="simg" :src="JSON.parse(item.Images)[1]" mode="aspectFill" />
                      </view>
                    </view>
                    <view class="four-two">
                      <view class="four-two-one" @click.stop="lookimg(item.Images, 2,item.UserID)">
                        <image class="simg" :src="JSON.parse(item.Images)[2]" mode="aspectFill" />
                      </view>
                      <view class="four-two-two" @click.stop="lookimg(item.Images, 3,item.UserID)">
                        <image class="simg" :src="JSON.parse(item.Images)[3]" mode="aspectFill" />
                      </view>
                    </view>
                  </view>
                  <view class="five" v-else>
                    <view class="five-one" v-for="(imgs, index) in JSON.parse(item.Images)" :key="index">
                      <image @click.stop="lookimg(item.Images, index,item.UserID)" :src="imgs" mode="aspectFill" />
                    </view>
                  </view>
                </view>
                <view class="video_box" v-else @click.stop="">
                  <video :id="'video'+index" :direction="0" :src="JSON.parse(item.Images)[0]" :poster="JSON.parse(item.Images)[0] +
                    '?x-oss-process=video/snapshot,t_1,m_fast,ar_auto'
                    " @play="videoPlay(index)"></video>
                </view>
              </view>

              <view class="all-list">
                <view class="upvote">
                  <view class="zan-time">
                    {{ item.City ? item.City : "" }}
                  </view>
                  <view class="zan-review">
                    <view class="zan" @click="zan(item.ID)">
                      <uni-icons type="hand-up" size="24" color="#9b9b9b" v-if="item.IsMyZAN == 0"></uni-icons>
                      <uni-icons type="hand-up-filled" size="24" color="#ef4034" v-else></uni-icons>
                      <text>{{
                        item.CommunityZAN.length > 0
                          ? item.CommunityZAN.length
                          : ""
                      }}</text>
                    </view>
                    <!-- <view class="zan" @click="open_gift(item)">
						<uni-icons type="gift" size="24" color="#9b9b9b" v-if="item.IsSendGift==0"></uni-icons>
						<uni-icons type="gift-filled" size="24" color="#ef4034" v-else></uni-icons>
						<text>{{item.TotalGiftNum>0?item.TotalGiftNum:''}}</text>
					</view> -->
                    <view class="zan" @click="tocommit(item.ID, 0)">
                      <uni-icons type="chat" size="24" color="#9b9b9b"></uni-icons>
                      <text>{{
                        item.CommunityComments.length > 0
                          ? item.CommunityComments.length
                          : ""
                      }}</text>
                    </view>
                    <view class="zan">
                    <!-- #ifdef MP-WEIXIN -->
                    <button hover-class="none" open-type="share" :data-id="item.ID">
						<uni-icons type="redo" size="24" color="#9b9b9b"></uni-icons>
					</button>
                    <!-- #endif -->
                    <!-- #ifdef APP-PLUS -->
                    <!-- <button hover-class="none" @click="app_share(item)">
							<uni-icons type="redo" size="24" color="#9b9b9b"></uni-icons>
						</button> -->
                    <!-- #endif -->
                    </view>
                  </view>
                </view>

                <view class="review-list" v-if="item.CommunityComments.length > 0">
                  <view class="list" v-for="(review, c_index) in item.CommunityComments" :key="review.ID">
                    <view class="content" @click="comment_edit(index, c_index, review.Name)" v-if="review.ReplyID > 0">
                      <!-- <view class="content" :class="{diyHeight:useDiyHeight}" @click="comment_edit(index,c_index)" v-if="review.ReplyID>0"> -->
                      <text>
                        <text @click.stop="nav_to('/pages/user/user_visitor?id=' + review.UserID)">{{
                          $util.entitiesToUtf16(review.Name) }}</text>
                        <text class="reviewC">回复</text>
                        <text @click.stop="nav_to('/pages/user/user_visitor?id=' + review.Pre_UserID)"> {{
                          $util.entitiesToUtf16(review.Pre_Name) }}:</text>
                        </text>
                      <text>{{ $util.entitiesToUtf16(review.Content) }}</text>
                    </view>
                    <!-- <view class="content" :class="{diyHeight:useDiyHeight}" @click="comment_edit(index,c_index,review.Name)" v-else> -->
                    <view class="content" @click="comment_edit(index, c_index, review.Name)" v-else>
                      <text @click.stop="nav_to('/pages/user/user_visitor?id=' + review.UserID)">{{ $util.entitiesToUtf16(review.Name) }}:</text>
                      <text>{{ $util.entitiesToUtf16(review.Content) }}</text>
                    </view>
                  </view>
                </view>
              </view>

              <view class="load" v-if="bottom_load">
                <u-loading-icon mode="circle" inactive-color="#fff" vertical></u-loading-icon>
              </view>
            </view>
            <view style="height: 200rpx"></view>
          </view>
		<block v-else>
			<u-empty mode="list" width="64" height="64"
				icon="https://golfdate.oss-cn-shenzhen.aliyuncs.com/community/20230510114106.png" :show="true" iconSize="32"
				text="啊哦,信息没找到,是不是搞错了"></u-empty>
		</block>

		<uni-popup ref="duihuan" type="center">
			<view class="pop_con">
				<view class="hd f1">账户充值</view>
				<view class="inp">
					<view class="lab">金额:</view>
					<input type="number" v-model="cz_price" placeholder="最小充值为10">
				</view>
				<view class="btns">
					<u-button text="取消" @click="closeDh"></u-button>
					<u-button type="success" text="确定" @click="recharge"></u-button>
				</view>
			</view>
		</uni-popup>
		<inputBox :commit="commit" @submit="submit" @onBlur="onBlur"></inputBox>

		<uni-popup ref="gift" type="center">
			<view class="x-popup">
				<view class="popup-title">赠送对方礼物
					<view class="xiaoju-popup-close" @click="$refs['gift'].close()">关闭</view>
				</view>
				<scroll-view class="popup-wrap" scroll-y="true" :show-crollbar="true" scroll-with-animation="true">
					<view class="x-list">
						<view v-for="(l,i) in gift" :key="i" @click="gift_active=i" class="list-cell"
							:class="{'list-active':i==gift_active}">
							<image class="list-icon" :src="l.Icon?l.Icon:'/static/img/icon_bbt.png'" mode=""></image>
							<view v-if="i!=gift_active" class="list-name"> {{l.Name}} </view>
							<view class="list-price"> ￥{{l.Price}} </view>
							<!-- <view v-if="i==gift_active" @click="giftEvent" class="list-btn"> 赠送 </view> -->

							<view v-if="i==gift_active" class="list-btn">
								<view class="add" @click="gift_num_reduce(l)">-</view>
								<view class="count">
									<input type="text" v-model="l.Num" />
								</view>
								<view class="add" @click="gift_num_plus(l)">+</view>

							</view>
						</view>
					</view>
				</scroll-view>
				<view class="popup-btn" @click="giftEvent">赠送</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import inputBox from "./components/input-box.vue";
	export default {
		components: {
			inputBox,
		},
		data() {
			return {
				commit: false,
				ID: 0,
				user: {},
				list: [],
				shareTitle: "挥友", //转发的标题
				sharePath: "", //转发的页面
				shareImg: "",

				CompanyID: 6002,
				isMore: true,
				zan_id: 0,
				review_id: 0,

				gift: [], //礼物数组
				gift_active: -1, //当前选中礼物
			};
		},
		methods: {
			async submit(val) {
			// console.log('22222222');
			// console.log(val,'val');
			if (val != "") {
				// 转换后端可编译的emoji表情的编码格式
				let utf16 = this.$util.utf16ToEntities(val).slice(0,200);
				let res = await this.$api.post("/Community/UserComment", {
				CommunityID: this.review_id,
				Content: utf16,
				CompanyID: 6002,
				ReplyID: this.comment_id,
				});
				//console.log(JSON.parse(res.data));
				if (res.code == 0) {
				// console.log("评论测试",res);
				this.list.forEach(async (item, index) => {
					if (item.ID == this.review_id) {
					item.CommunityComments.push({
						UserID: uni.getStorageSync("user").UserID,
						HeadImgUrl: uni.getStorageSync("user").HeadImgUrl,
						Name: uni.getStorageSync("user").Name,
						Content: val,
						CreateTime: new Date(),
						ReplyID: this.comment_id,
						Pre_Name: this.repName,
						ID:res.data
					});
					this.list.splice(index, 1, item);
					}
				});

				this.commit = !this.commit;
				}
			} else {
				this.$pv.msg("评论不能为空");
			}
			},
			onBlur(emit) {
				setTimeout(()=>{
					this.commit = emit;
				},500)
			},
			// 评论
			tocommit(ID, C_ID) {
				let _this = this;
				if (uni.getStorageSync("user").IsAuth == 0) {
					uni.showModal({
					title: "温馨提示",
					content: "您还没注册，请先注册",
					confirmText: "确定",
					success: function (rs) {
						if (rs.confirm) {
						_this.nav_to("/pages/start/start2");
						}
					},
					});
					return;
				}
				// console.log('没有被return');
				// console.log(id);
				this.commit = !this.commit;
				this.review_id = ID;
				this.comment_id = C_ID;

				//console.log('评论ID', this.review_id);
			},
		async delReview(index, c_index) {
		const item = this.list[index].CommunityComments[c_index];
		//console.log(item,"评论删除");
		let res = await this.$api.post("/Community/DeletePage", {
			ID: item.ID,
		});
		this.$pv.msg("删除成功");

		this.list[index].CommunityComments.splice(c_index, 1);
		},
			// 获取礼物列表
			async GetGift() {
				let res = await this.$api.post('Friend/GetGift');
				this.gift = res.data || [];
			},
			open_gift() {
				this.$refs['gift'].open()
			},
			async giftEvent(item) {

				// 当前选中礼物
				const l = this.gift[this.gift_active]

				let res_gift = await this.$api.post('Friend/SendGift', {
					Price: l.Price,
					GiftID: l.ID,
					GiftName: l.Name,
					ToUserID: this.item.UserID,
					EventID: this.item.ID,
					SendType: '球友圈赠送'
				});


				// id=123129&type=0&name=abc
				// 支付请求
				let pres = await this.$api.post('Payment/PayV2', {
					total_fee: l.Price,
					EventType: '赠送礼物',
					EventID: JSON.stringify(res_gift.data),
					body: l.Name,
					SourcePage:'dynamic/detail',
					// #ifdef MP-WEIXIN
					PayChannel: "weixin",
					// #endif
					// #ifdef APP
					PayChannel: "app"
					// #endif
				});
				// 已余额支付成功
				if (pres.data == 0) {
					// 提示赠送成功
					this.$pv.msg('礼物赠送成功');
					// 关闭礼物弹出层
					this.$refs['gift'].close()

					this.item.IsSendGift = 1;
					this.item.Gifts.push({
						UserID: uni.getStorageSync('user').UserID
					})

					return;
				}

				// 支付成功返回的内容
				let payObj = JSON.parse(pres.data);
				let _this = this;
				// 调用uni支付API
				uni.requestPayment({
					// 服务提供商
					provider: 'wxpay',
					// #ifdef APP
					orderInfo: payObj,
					// #endif
					// #ifdef MP-WEIXIN
					timeStamp: payObj.timeStamp,
					nonceStr: payObj.nonceStr,
					package: payObj.package,
					signType: payObj.signType,
					paySign: payObj.paySign,
					// #endif
					success(res) {

						// 关闭礼物弹出层
						_this.$refs['gift'].close();

						_this.$pv.msg('礼物赠送成功');

						_this.item.IsSendGift = 1;
						_this.item.Gifts.push({
							UserID: _this.user.UserID
						})

					},
					fail(err) {
						_this.$pv.msg('支付失败');
					}
				});
			},

			async init() {

				this.user = uni.getStorageSync('user');
        
				await this.$api.post('/Common/Add_ViewPath', {
					Path: 'dynamic/detail',
					Platform:uni.getStorageSync('platform')
				});

				await this.getDetail();



				await this.GetGift();

			},
			async getDetail() {
				let res = await this.$api.post('Community/Detail', {
					ID: this.ID
				});
				if(res.code == 0){
					this.list.push(res.data);
				}
				
			},
			// 赞
			async zan(zid) {

				this.zan_id = zid;

				let res = await this.$api.post('Community/ZAN', {
					ID: zid
				});

				if (JSON.stringify(res.data) == 'true') {
					this.$pv.msg('点赞成功');

					this.list.forEach((item, index) => {
						if (item.ID == zid) {
							item.IsMyZAN = 1;
							item.CommunityZAN.push({
							UserID: uni.getStorageSync("user").UserID,
							HeadImgUrl: uni.getStorageSync("user").HeadImgUrl,
							});
							this.list.splice(index, 1, item);
						}
					});
				} else {
					this.$pv.msg(res.message);
				}
			},


			lookimg(url, index) {
				let arr = JSON.parse(url);
				uni.previewImage({
					urls: arr,
					current: index,
				})
			},

			async onLoad(e) {

				this.ID = e.id;
        uni.setStorageSync('pid', e.pid);
				if (await this.$store.getters.getLoginState) {

					this.init();

				}
			},
			onShow() {},
			onShareAppMessage(e) { //发送给朋友
				let o = this.list.find((item) => item.ID == this.ID);;
				console.log(o);
				let pid = uni.getStorageSync('user').UserID;

				this.shareTitle = '挥友圈精彩瞬间，您不容错过';
				this.sharePath = 'pages/dynamic/detail?pid=' + pid + '&id=' + this.ID;
				this.shareImg = o.IsVideo == 1 ? JSON.parse(o.Images)[0] + '?x-oss-process=video/snapshot,t_1,m_fast,ar_auto' :
					JSON.parse(o.Images)[0]
				return {
					title: this.shareTitle,
					path: this.sharePath,
					imageUrl: this.shareImg
				}
			}
		}
	}
</script>

<style lang="scss">
page {
  background-color: #f6f6f6;
}

.trends {
  height: 100vh;

  .week_share {
    display: flex;
    background-color: #f4f4f4;
    border: #848484 1rpx solid;
    width: 95%;
    margin: 10rpx auto;
    padding: 10rpx;

    image {
      width: 100%;
      height: 100rpx;
    }

    .week_act {
      color: #ffff00;
      padding: 10rpx;
      width: 70%;
      flex-direction: row;
      display: flex;

      .title {
        color: #2f2f00;
        font-size: 36rpx;
        font-weight: bold;
      }

      .desc {
        color: #81807f;
        font-size: 28rpx;
      }
    }

    .title_right {
      font-size: 32rpx;
      justify-content: center;
      justify-items: center;
      position: absolute;
      right: 40rpx;
      background-color: #ff9800;
      border-radius: 10rpx;
      padding: 12rpx;
      color: #fff;
    }

    .act {
      line-height: 40rpx;
      color: #55aaff;
    }
  }

  .item {
    background: #fff;
    border-radius: 16rpx;
    margin: 24rpx;
    padding: 20rpx 0;

    .item_hd {
      height: 100rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 20rpx;

      .left {
        height: 100rpx;
        flex: 1;
        display: flex;
        align-items: center;
      }

      .cover {
        width: 80rpx;
        min-width: 80rpx;
        height: 80rpx;
        border-radius: 50rpx;
        border: 1px solid #7b7b7b;
        overflow: hidden;
        margin-right: 16rpx;

        image {
          height: 100%;
          width: 100%;
          display: block;
        }
      }

      .item_name {
        flex: 1;
        .userName{
          color: #333;
          font-size: 32rpx;
          font-weight: 600;
          display: flex;
          align-items: center;
          >image{
            width: 76rpx;
            margin-left: 10rpx;
          }
          .usertime{
            font-weight: 500 !important;
            margin-left: auto;
          }
        }
        
        .daybox {
          font-weight: 400;
          font-size: 24rpx;
          margin-top: 6rpx;
          .Birthday {
            font-size: 24rpx;
            padding: 0 15rpx 0 0;
            color: #999999;
          }
          .borderLine{
            font-size: 24rpx;
            color: #999999;
          }
          .city {
            margin-left: 15rpx;
            color: #999999;
          }
        }
      }
    }

    .item_ft {
      display: flex;
      justify-content: space-between;
      height: 60rpx;
      align-items: right;

      .ft_btn {
        display: flex;
        align-items: center;
      }

      .icon_box {
        height: 48rpx;
        width: 48rpx;
        border-radius: 48rpx;
        background: rgba(255, 255, 255, 0.9);
        margin-right: 16rpx;
        display: flex;
        justify-content: center;
        align-items: center;

        image {
          height: 32rpx;
          width: 32rpx;
        }
      }
    }

    .item_bd {
      .diyC {
        font-size: 28rpx;
        color: #333333;
        line-height: 40rpx;
        white-space: pre-line;
      }

      .simg {
        display: block;
        //smax-height: 750rpx;
      }


      .order_div {
        width: 100%;
        margin-top: 10rpx;
        height: 80rpx;
        line-height: 80rpx;
      }
    }
  }
}

// .add_btn {
// 	position: fixed;
// 	right: 32rpx;
// 	bottom: 170rpx;
// 	width: 96rpx;
// 	height: 96rpx;
// 	z-index: 999;
// 	// text-align: center;
// 	align-items: center;
// 	line-height: 96rpx;
// 	border-radius: 100rpx;

// 	>image {
// 		width: 96rpx;
// 		height: 96rpx;
// 	}
// }
.apptopbox{
  width: 100%;
  height: 54rpx;
  // position: relative;
  background-color: #fff;
  margin-bottom: 25rpx;
}
.topBox2 {
  width: 100%;
  height: 150rpx;
  padding-top: 70rpx;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 15rpx auto;
  position: fixed;
  top: -15rpx;
  left: 0;
  background-color: #fff;
  z-index: 9999;
  .hyq {
    font-size: 36rpx;
    font-weight: bold;
    color: #333333;
  }

  .puadd {
    width: 150rpx;
    height: 58rpx;
    border-radius: 32rpx;
    background-color: #f2f2ff;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 20rpx;

    .putitle {
      color: #706eee;
      font-weight: bold;
      font-size: 26rpx;
    }

    .releaseimg {
      width: 30rpx;
      height: 30rpx;
    }
  }
}
.topBox {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 15rpx auto;
  position: relative;

  .hyq {
    font-size: 36rpx;
    font-weight: bold;
    color: #333333;
  }

  .puadd {
    width: 150rpx;
    height: 58rpx;
    border-radius: 32rpx;
    background-color: #f2f2ff;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 20rpx;

    .putitle {
      color: #706eee;
      font-weight: bold;
      font-size: 26rpx;
    }

    .releaseimg {
      width: 30rpx;
      height: 30rpx;
    }
  }
}

.order_btn {
  width: 100%;
  height: 70rpx;
  text-align: center;
  align-items: center;
  background: linear-gradient(180deg, #fef0bc 0%, #b98b51 100%);
  box-shadow: 0px 4rpx 6rpx 0px rgba(106, 84, 53, 0.4);
  color: #4c310c;
  line-height: 70rpx;
  border-radius: 10rpx;
}
.nonePd {
  padding-bottom: 0 !important;
}
.mt20 {
  margin-top: 20rpx;

  .one {
    display: flex;
    width: 100%;
    max-height: 800rpx;
    overflow: hidden;
    //height: 400rpx;

    // image {
    //   width: 70%;
    // }
  }

  .two {
    display: flex;

    .two-one {
      width: 200rpx;
      height: 200rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .two-two {
      width: 200rpx;
      height: 200rpx;
      margin-left: 6rpx;
      image {
        width: 100%;
        height: 100%;
      }
    }
  }

  .three {
    display: flex;
    
    .three-one {
      image {
        width: 200rpx;
        height: 200rpx;
      }
    }

    .three-two {
      display: flex;

      image {
        width: 200rpx;
        height: 200rpx;
        margin-left: 6rpx;
      }
    }
  }

  .four {
    display: flex;
    flex-direction: column;

    .four-one {
      display: flex;

      .four-one-one {
        image {
          width: 200rpx;
          height: 200rpx;
        }
      }

      .four-one-two {
        image {
          width: 200rpx;
          height: 200rpx;
          margin-left: 6rpx;
        }
      }
    }

    .four-two {
      display: flex;
      margin-top: 6rpx;
      .four-two-one {
        image {
          width: 200rpx;
        height: 200rpx;
        }
      }
      .four-two-two {
        image {
          width: 200rpx;
          height: 200rpx;
          margin-left: 6rpx;
        }
      }
    }
  }

  .five {
    display: flex;
    flex-wrap: wrap;
    width: 100%;

    .five-one {
      width: 200rpx;
      height: 200rpx;
      margin-bottom: 8rpx;
      margin-right: 4rpx;
      margin-left: 4rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }
  }
}
.video_box {
  height: 500rpx;
  position: relative;
  z-index: 2;
margin-top: 20rpx;
  video {
    width: 50%;
    height: 100%;
    // margin-top: 10rpx;
    
  }
}

.all-list {
  width: 100%;
  // box-sizing: border-box;

  // padding: 0 32rpx;

  .location {
    font-size: 30rpx;
    color: #dcc188;
  }

  .upvote {
    display: flex;
    // justify-content: space-between;
    align-items: center;
    margin: 5rpx 32rpx;
    margin-top: 20rpx;
    // padding-bottom: 15rpx;

    .zan-time {
      font-size: 26rpx;
      color: #999999;
    }

    .zan-review {
      display: flex;
      align-items: right;
      margin: 10rpx 0;
      height: 40rpx;
      margin-left: auto;

      image {
        padding-top: 26rpx;
        width: 48rpx;
        height: 48rpx;
      }

      .zan {
        display: flex;
        align-items: center;

        text {
          padding-left: 5rpx;
          font-size: 26rpx;
        }
      }

      .zan:last-child {
        margin-left: 4rpx;
      }

      button {
        display: flex;
        //height:50rpx !important;
        background-color: unset;

        &::after {
          border: 0;
        }
      }
    }

    .gift-review {
      display: flex;
      align-items: right;

      .zan {
        margin-right: 40rpx;
      }
    }
  }

  .tishi {
    box-sizing: border-box;
    position: relative;
    height: 60rpx;
    border-radius: 6rpx;
    background-color: #ffffff;
    display: flex;
    margin-top: 30rpx;
    padding-left: 6rpx;

    text {
      line-height: 60rpx;
      font-size: 28rpx;
      color: #dcc188;
      margin-left: 12rpx;
      letter-spacing: 2px;
    }

    .sanjiao {
      position: absolute;
      top: -15rpx;
      left: 30rpx;
      width: 0;
      height: 0;
      border-left: 15rpx solid transparent;
      border-right: 15rpx solid transparent;
      border-bottom: 20rpx solid #fff;
    }
  }

  .review-list {
    // display: flex;
    // flex-direction: column;
    /* margin: 20rpx 20rpx 20rpx; */
    // background-color: #F6F6F6;
    // padding: 10rpx 20rpx;
    // margin: 0 20rpx;
    width: 100%;

    .list {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      flex-wrap: wrap;
      line-height: 45rpx;

      .content {
        margin-left: 32rpx;
        margin-right: 32rpx;
        font-weight: 700;
        font-size: 28rpx;
        word-break: break-all;

        text {
          box-sizing: border-box;
          font-weight: 500;
          font-size: 28rpx;
          color: #5f698b;
          padding-right: 10rpx;
        }

        .reviewC {
          font-weight: 500;
          font-size: 28rpx;
          color: #1d1d1d;
          // margin: 0 10rpx;
        }

        > text:last-child {
          font-weight: 500;
          font-size: 28rpx;
          color: #1d1d1d;
          word-break: break-all;
          margin-left: 10rpx;
        }
      }

      .del {
        font-size: 12px;
        color: #576b95;
      }
    }
  }
}

.x-share {
  background-color: #ffffff;
  width: 750rpx;
  border-radius: 20rpx;
  padding: 40rpx 20rpx 80rpx;
  display: flex;
  box-sizing: border-box;

  .item {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: #ffffff;

    image {
      width: 64rpx;
      height: 64rpx;
      margin-bottom: 10rpx;
    }

    span {
      color: #2e2e2e;
    }
  }
}

.x-popup {
  background-color: #ffffff;
  width: 650rpx;
  border-radius: 20rpx;
  padding-bottom: 20rpx;

  .popup-title {
    padding: 20rpx 0 10rpx;
    text-align: center;
    font-size: 32rpx;
    position: relative;
    color: #333;

    .xiaoju-popup-close {
      font-size: 24rpx;
      position: absolute;
      right: 50rpx;
      top: 10rpx;
      color: #333;
    }
  }

  .popup-wrap {
    max-height: 800rpx;
    min-height: 300rpx;
    padding-top: 10rpx;
    padding-bottom: 30rpx;

    .popup-cell {
      padding: 8rpx 40rpx;
      font-size: 30rpx;
      line-height: 44rpx;
    }
  }

  .popup-btn {
    margin: 0 auto;
    width: 200rpx;
    height: 60rpx;
    border-radius: 10rpx;
    color: #fff;
    font-size: 28rpx;
    letter-spacing: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fd4c61;
  }
}

.x-list {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  padding: 0 60rpx;

  .list-cell {
    width: 27%;
    height: 170rpx;
    border: 2rpx solid #fff;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 5rpx 0rpx 10rpx;
    border-radius: 16rpx;
    position: relative;

    &.list-active {
      border-radius: 16rpx;
      border: 2rpx solid #70737c;
    }

    .list-btn {
      width: calc(100% + 4rpx);
      height: 52rpx;
      color: #fff;
      background: #fd4c61;
      border-radius: 0rpx 0rpx 16rpx 16rpx;
      position: absolute;
      bottom: -2rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24rpx;

      .count {
        color: #fff;
        line-height: 60rpx !important;
        // margin-right: 5rpx;

        input {
          width: 40rpx;
          //border: #fff solid 1rpx;
        }
      }

      .add {
        display: flex;
        justify-content: center;
        align-items: center;
        /* border: 2rpx solid #ccc; */
        box-sizing: border-box;
        font-size: 52rpx;
        width: 75rpx;
        color: #fff;
      }
    }

    .list-icon {
      width: 80rpx;
      height: 80rpx;
    }

    .list-name {
      color: #333;
      font-size: 26rpx;
      margin-top: 8rpx;
    }

    .list-price {
      color: #333;
      font-size: 22rpx;
      margin-top: 5rpx;
    }
  }
}

.bannerImageBox {
  width: 95%;
  height: 100rpx;
  margin: 0 auto;
  border-radius: 25rpx;
  overflow: hidden;
  margin: 5rpx auto;

  .adverimg {
    width: 100%;
    height: 100%;
    display: block;
  }
}
</style>